<template>
  <div id="map"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import china from '@/json/china.json'
import { watch, reactive } from 'vue'
const state = reactive({
  // 轮播图数据
  data: [] as { name: string; value: number | [] | Object }[],
})
// 注册可用的地图
echarts.registerMap('china', china as any)
// 地图数据
const props = defineProps<{ saleMap: ISaleMapModel[] }>()
// 创建 地图
let myMap: echarts.ECharts
watch(
  () => props.saleMap,
  () => {
    // 基于准备好的dom，初始化echarts实例
    myMap = echarts.init(document.getElementById('map') as HTMLElement)

    state.data = props.saleMap.map((item) => ({ name: item.areaName, value: item.saleNum }))
    // console.log(state.data)
    // 绘制 地图
    let option = {
      title: { text: '全国销量分布图', left: 'center' },
      tooltip: {
        show: true,
        formatter: '{b0}<br />销量: {c0}',
        backgroundColor: 'rgba(50,50,50,0.7)',
        borderColor: 'transparent',
        textStyle: { color: '#fff' },
      },
      visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000000,
        calculable: true,
        inRange: {
          color: ['#fff', 'red', '#a62a29'],
        },
      },
      series: {
        type: 'map',
        map: 'china',
        selectedMode: false,
        emphasis: {
          label: { show: false },
          itemStyle: { areaColor: '#8884d8' },
        },
        itemStyle: { borderColor: '#fff' },
        data: state.data,
      },
    }
    myMap.setOption(option)
  }
)
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 1000px;
}
</style>
